<template>
  <div>
    <div style="margin-top: 1%;text-align:center;">
      <el-button @click="returnPage()" style="font-size: 20px;" type="primary">返回</el-button>
      <span style="font-size:22px;;margin-left: 10%">项目名称: </span>
      <span style="font-size:24px;font-weight: bold;color:#409eff;margin-right: 10%">{{subProject.subName}}</span>
      <el-select  v-model="form.clazzId" filterable style="width: 20%;margin-right: 1%">
        <el-option v-for="item in clazz" :key="item.clazzId"
                   :label="item.clazzId + '班'" :value="item.clazzId">
        </el-option>
        <el-option label="其它学生" :value="''"/>
      </el-select>
      <el-button @click="findSubScores()" style="font-size: 20px;" type="info">立即查看</el-button>
      <el-button @click="saveSubScores('handle')" type="primary"
                 style="font-size: 20px;margin-left: 2%">保存</el-button>
    </div>
    <template style="margin-top: 2%">
      <el-table :data="pageInfo.list">
        <el-table-column label="" width="350">
        </el-table-column>
        <el-table-column label="学号" width="280" prop="stuId" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.stuId}}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="300">
          <template slot-scope="scope">
            <span>{{scope.row.stuName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="成绩"  width="400">
          <template slot-scope="scope">
            <el-input v-model="scope.row.subScore"
                      style="font-size:22px;font-weight: bold"
                      @keyup.native="inputChange(scope.row)">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="" width="350">
        </el-table-column>
      </el-table>
      <div style="margin-bottom: 1%;"></div>
      <el-pagination
          style="text-align: center;"
          background
          layout="total,prev, pager, next"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          @current-change="handleCurrentChange">
      </el-pagination>
    </template>
  </div>
</template>

<script>
export default {
  data(){
    return{
      form:{
        subProjectId: '',
        teachId: '',
        clazzId:'',
      },
      subProject:{},
      teachTask:{},
      clazz:[],
      currPage: 1,
      pageInfo:{},
      modify:false,
      modifyList:[],
    }
  },
  created() {
    this.form.subProjectId = this.$route.params.subProjectId;
    this.subProjectInit();
  },
  methods:{
    inputChange(row){//判断输入并记录改动
      this.modify = true;
      let add = true;
      for(let i = 0,list = this.modifyList;i < list.length;i++){//已被记录则无需再次记录
        if(list[i].subScoreId === row.subScoreId){
          add = false;
          break;
        }
      }
      if(add){//记录下所有改动过的成绩缓存
        this.modifyList.push(row);
      }
      if(row.subScore.length > 20){//长度过长则清除超出部分
        row.subScore = row.subScore.substring(0,20);
        this.$message.error("您的输入太长了!");
      }
    },
    handleCurrentChange(val){//翻页
      this.currPage = val;
      this.getData();
    },
    findSubScores(){//查找
      this.currPage = 1;
      this.getData();
    },
    getData(){//获取list
      this.saveSubScores();
      let path = `http://localhost:8081/subScore/getSubScoreList/${this.currPage}`;
      this.$ajax.post(path,this.form).then(res=>{
        this.pageInfo = res.data;
        this.modify = false;
        this.modifyList = [];//清空已记录的被改动列表
      })
    },
    saveSubScores(val){//保存
      if(this.modify){
        let path = 'http://localhost:8081/subScore/saveSubScores';
        this.$ajax.post(path,this.modifyList).then(res=>{
          if(res.data.status === 0){
            if(val === 'handle')
              this.$message.success('已成功为您保存了数据!');
            else
              this.$message.success('已自动为您保存了数据!');
            this.modify = false;
            this.modifyList = [];//清空已记录的被改动列表
          }
        })
      }
      else{
        if(val === 'handle')
          this.$message.warning('没有改动数据，无需保存!');
      }
    },
    subProjectInit(){//初始化项目
      let path = 'http://localhost:8081/subScore/selectOneProjectById';
      this.$ajax.post(path,this.form).then(res=>{
        this.subProject = res.data.obj;
        this.form.teachId = this.subProject.teachId;
        this.teachTaskInit();
      })
    },
    teachTaskInit(){//初始化教学安排
      let path = 'http://localhost:8081/teach/getTeachTasks/1';
      this.$ajax.post(path,this.form).then(res=>{
        let result = res.data.list[0];
        if(res.data.list.length === 1 && parseInt(result.teachState) === 1){
          this.teachTask = result;
          this.clazz = result.clazzes;
          this.getData();
        }
        else{
          alert("教学安排不存在或没有权限!");
          this.$router.push('/teacher/teachTaskMGMT');
        }
      })
    },
    returnPage(){//返回
      this.saveSubScores();
      this.$router.push(`/teacher/subProjectMGMT/${this.form.teachId}`);
    },
  }
}
</script>

<style scoped>
span{
  font-size: 18px;
}
</style>